<template>
  <div class="dashboard-container">
    <div class="card-container">
      <el-row :gutter="20">
        <el-col :span="6" v-for="item in cards" :key="item.title">
          <el-card class="stat-card" shadow="hover">
            <div class="stat-content">
              <div class="stat-icon" :style="{ backgroundColor: item.color }">
                <svg class="icon" aria-hidden="true">
                  <use :xlink:href="item.icon"></use>
                </svg>
              </div>
              <div class="stat-info">
                <div class="stat-title">{{ item.title }}</div>
                <div class="stat-value">{{ item.data }}</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <el-card class="chart-card" shadow="hover">
        <template #header>
          <div class="chart-header">
            <span>数据统计</span>
            <div id="myTimer" class="timer"></div>
          </div>
        </template>
        <div id="main" style="width: 100%; height: 400px;"></div>
      </el-card>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { ElMessage } from "element-plus";
import request from "../utils/request";

export default {
  data() {
    return {
      cards: [
        { title: '订单数', data: 0, icon: '#iconlend-record-pro', color: 'rgba(22, 93, 255, 0.1)' },
        { title: '总访问', data: 0, icon: '#iconvisit', color: 'rgba(114, 46, 209, 0.1)' },
        { title: '图书数', data: 0, icon: '#iconbook-pro', color: 'rgba(255, 125, 0, 0.1)' },
        { title: '用户数', data: 0, icon: '#iconpopulation', color: 'rgba(0, 180, 42, 0.1)' }
      ],
      myChart: null
    }
  },
  mounted() {
    this.circleTimer()
    this.loadData()
    window.addEventListener('resize', this.handleResize)
  },
  beforeUnmount() {
    window.removeEventListener('resize', this.handleResize)
    if (this.myChart) {
      this.myChart.dispose()
    }
  },
  methods: {
    handleResize() {
      if (this.myChart) {
        this.myChart.resize()
      }
    },
    loadData() {
      request.get("/dashboard").then(res => {
        if (res.code == 0) {
          this.cards[0].data = res.data.orderCount
          this.cards[1].data = res.data.visitCount
          this.cards[2].data = res.data.bookCount
          this.cards[3].data = res.data.userCount
          this.initChart()
        } else {
          ElMessage.error(res.msg)
        }
      })
    },
    initChart() {
      const chartDom = document.getElementById('main')
      if (!chartDom) return
      
      this.myChart = echarts.init(chartDom)
      
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.cards.map(item => item.title),
          axisTick: {
            alignWithLabel: true
          },
          axisLine: {
            lineStyle: {
              color: '#86909c'
            }
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: '#e5e6eb'
            }
          }
        },
        series: [
          {
            name: '数量',
            type: 'bar',
            barWidth: '40%',
            data: [
              { value: this.cards[0].data, itemStyle: { color: '#165DFF' } },
              { value: this.cards[1].data, itemStyle: { color: '#722ED1' } },
              { value: this.cards[2].data, itemStyle: { color: '#FF7D00' } },
              { value: this.cards[3].data, itemStyle: { color: '#00B42A' } }
            ],
            itemStyle: {
              borderRadius: [4, 4, 0, 0]
            }
          }
        ]
      }
      
      this.myChart.setOption(option)
    },
    circleTimer() {
      this.getTimer()
      setInterval(() => {
        this.getTimer()
      }, 1000)
    },
    getTimer() {
      const d = new Date()
      const t = d.toLocaleString()
      const timer = document.getElementById('myTimer')
      if (timer) {
        timer.innerHTML = t
      }
    }
  }
}
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
}

.stat-card {
  margin-bottom: 20px;
  border: none;
  border-radius: 4px;
  transition: all 0.3s;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.stat-content {
  display: flex;
  align-items: center;
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
}

.stat-icon .icon {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.stat-info {
  flex: 1;
}

.stat-title {
  color: var(--color-text-2);
  font-size: 14px;
  margin-bottom: 4px;
}

.stat-value {
  color: var(--color-text-1);
  font-size: 24px;
  font-weight: 700;
}

.chart-card {
  border: none;
  border-radius: 4px;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text-1);
}

.timer {
  font-size: 14px;
  color: var(--color-text-3);
  font-weight: normal;
}
</style>